.coolButton,
.coolButtonHover,
.coolButtonActiveHover,
.coolButtonActive,
.coolButtonActiveDisabled,
.coolButtonDisabled,
.coolButtonUpDisabled {
	cursor: 			Default;
	font: 				Icon;
	font-weight: 		normal;
	padding:			2px 5px 2px 5px;
	border:				0px solid ButtonFace;
	white-space:		nowrap;
	vertical-align:		middle;
	background-color:	ButtonFace;
}

.coolButton img {
	filter:				gray();
}

.coolButtonHover {
	border-width:		1px;
	border-left-color:	ButtonHighlight;
	border-right-color:	ButtonShadow;
	border-top-color:	ButtonHighlight;
	border-bottom-color:ButtonShadow;
	padding:			1px 4px 1px 4px;		
}

.coolButtonActiveHover {
	border-width:		1px;
	border-left-color:	ButtonShadow;
	border-right-color:	ButtonHighlight;
	border-top-color:	ButtonShadow;
	border-bottom-color:ButtonHighlight;
	padding:			2px 3px 0px 5px;
}

.coolButtonActive {
	border-width:		1px;
	border-left-color:	ButtonShadow;
	border-right-color:	ButtonHighlight;
	border-top-color:	ButtonShadow;
	border-bottom-color:ButtonHighlight;
	padding:			2px 3px 0px 5px;
	background-image:	url("images/cbback.gif");
}

.coolButtonUpDisabled,
.coolButtonActiveDisabled,
.coolButtonDisabled {
	padding:			2px 5px 2px 5px;
	color:				GrayText;
	border-width: 		0px;
}

.coolButtonActiveDisabled {
	border-width:		1px;
	border-left-color:	ButtonShadow;
	border-right-color:	ButtonHighlight;
	border-top-color:	ButtonShadow;
	border-bottom-color:ButtonHighlight;
	padding:			2px 3px 0px 5px;
}

.coolButtonUpDisabled {
	border-width:		1px;
	border-left-color:	ButtonHighlight;
	border-right-color:	ButtonShadow;
	border-top-color:	ButtonHighlight;
	border-bottom-color:ButtonShadow;
}

/* My latest build of mozilla crashed with the opacity */
.coolButtonUpDisabled img,
.coolButtonActiveDisabled img,
.coolButtonDisabled img {
	-moz-opacity:		0.5;
}

/* IE specific
 * When the button becomes disbabled the innerHTML is enclosed by two spans
 * This is done so that the image will look disabled using filters
 */
.coolButtonUpDisabled .coolButtonDisabledContainer,
.coolButtonActiveDisabled .coolButtonDisabledContainer,
.coolButtonDisabled .coolButtonDisabledContainer {
	display:			block;
	background:			GrayText;
	filter:				chroma(color=#010101) dropshadow(color=ButtonHighlight, offx=1, offy=1);
	width:				100%;
	height:				100%;
	vertical-align:		center;
}

.coolButtonUpDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer,
.coolButtonActiveDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer,
.coolButtonDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
	background:			Transparent;
	filter:				gray()
						/* Remove all bright shades of gray */
						chroma(color=#ffffff) chroma(color=#fefefe) chroma(color=#fdfdfd)
						chroma(color=#fcfcfc) chroma(color=#fbfbfb) chroma(color=#fafafa)
						chroma(color=#f9f9f9) chroma(color=#f8f8f8) chroma(color=#f7f7f7)
						chroma(color=#f6f6f6) chroma(color=#f5f5f5) chroma(color=#f4f4f4)
						chroma(color=#f3f3f3) 
						mask(color=#010101);
}

/* end IE specific */